/**
内容右侧图片文字等
*/
<template>
  <div class="user-info-wrap">
    <div class="user-info">
      <i class="el-icon-date" style="color: orange;margin-right:10px;margin-top:5px;font-size:20px"></i>
      <div class="user-right-info">
       <div class="right-wrap">
         <span class="text">晚上好！</span>
        <el-button class="el-button" type="primary" size='small' plain>去签到</el-button>
       </div>
       <div class="desc">点亮你在社区的每一天</div>
      </div>
    </div>
    <!-- :class="showNav?'':'sidebar'" -->
    <div style="width:240px;" :class="showNav?'':'sidebar'">
      <div><img
      style="width: 240px; height: 200px;margin-top:20px"
      src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d76f050f2f6d48f8890e4036ac4fdfb2~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
      alt=""
      /></div>
      <div>
        <img
        style="width: 240px; height: 200px;margin-top:20px"
        src=" https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a88a1ea956734105a5b002dfb48840cb~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
        alt=""
      />
      </div>
      <div class="app_link">
        <div><img  style="width:50px; height:50px; margin-right:5px;" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/home.59780ae.png" alt=""></div>
        <div class="app_link_left">
          <div style="font-size:14px; height:25px;line-height:25px;">下载稀土掘金APP</div>
          <div style="font-size:8px;margin-top:4px;height:25px;line-height:25px;color:#86909c;">一个帮助开发者成长的社区</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {

  },
  mounted() {
    window.addEventListener('scroll',this.handleScroll)
  },
  data() {
    return {
      showNav: true
    }
  },
  methods: {
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 800) {
        this.showNav = false
      } else {
        this.showNav = true
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
};
</script>

<style scoped >
.user-info-wrap{
    background-color: #F2F0F0 !important;
    width: 240px;
}
.user-info-wrap img{
  display: block;
}
.user-info{
    color: black;
    display: flex;
    background-color: white;
    
    align-items: flex-start;
    padding: 20px 10px;
}
.user-info .text{
    font-size: 20px;
}
.user-right-info .desc{
    padding-top: 10px;
}
.el-button {
  border-radius: 15px;
}
.user-right-info .right-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app_link {
  padding: 12px;
  background-color: #fff;
  margin-top: 18px;
  display: flex;
  align-items: center;
  width: 240px;
}
/* 滚动后固定定位 */
.sidebar {
  position: fixed;
  top: 50px;
  right: 18%;
}
</style>